<template>
  <editor-layout @ok="handleOk" v-on="$listeners" v-loading="loading">
    <el-form :model="dataForm" :rules="dataRule" ref="form" @keyup.enter.native="handleOk()" label-width="80px">
      <el-form-item label="角色名称" prop="roleName">
        <el-input v-model="dataForm.roleName" placeholder="角色名称"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
      </el-form-item>
      <el-form-item size="mini" label="授权">
        <el-tree
          :data="menuList"
          :props="menuListTreeProps"
          node-key="menuId"
          ref="menuListTree"
          :default-expand-all="true"
          show-checkbox>
        </el-tree>
      </el-form-item>
    </el-form>
  </editor-layout>
</template>

<script>
import { treeDataTranslate } from '@/utils'

import {getSysMenuListAll, getSysMenuQueryAllMenuId} from '$my/code/api/sys-menu'
import {getSysRoleInfoRoleId, postSysRoleSave, postSysRoleUpdate} from '$my/code/api/sys-role'

export default {
  name: 'edit',
  props: {
    id: [String, Number]
  },
  data() {

    return {
      loading: true,
      menuList: [],
      menuListTreeProps: {
        label: 'name',
        children: 'children'
      },
      dataForm: {
        roleId: 0,
        roleName: '',
        remark: ''
      },
      dataRule: {
        roleName: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' }
        ]
      },
      tempKey: -666666 // 临时key, 用于解决tree半选中状态项不能传给后台接口问题. # 待优化
    }
  },
  methods: {
    async init() {
      this.loading = true
      // 系统所有菜单
      const res = await getSysMenuListAll()
      // 用户被授权的菜单id
      const userMenuIds = await getSysMenuQueryAllMenuId()

      // 将用户未拥有的菜单禁止选择
      res.forEach(menu => {
        const item = userMenuIds.find(id => id === menu.menuId)
        if(!item) {
          menu.disabled = true
        } else {
          menu.disabled = false
        }
      })

      this.menuList = treeDataTranslate(res, 'menuId')
      if(this.id) {
        const data = await getSysRoleInfoRoleId(this.id)
        this.dataForm = {...data.role}
        const idx = data.role.menuIdList.indexOf(this.tempKey)
        if (idx !== -1) {
          data.role.menuIdList.splice(idx, data.role.menuIdList.length - idx)
        }
        this.$refs.menuListTree.setCheckedKeys(data.role.menuIdList)
      }
      this.loading = false
    },
    handleOk() {
      this.$refs.form.validate(ok => {
        if(!ok) return

        let saveFn = postSysRoleSave
        if(this.id) {
          saveFn = postSysRoleUpdate
        }
        this.loading = true
        const menuIdList = [].concat(this.$refs.menuListTree.getCheckedKeys(), [this.tempKey], this.$refs.menuListTree.getHalfCheckedKeys())
        const params = {...this.dataForm, menuIdList}
        if(this.tempPassword === this.dataForm.password) {
          // 加密密码没有被修改
          delete params.password
        }

        saveFn(params).then(res => {
          this.loading = false
          this.$notify.success('操作成功！')
          this.$emit('on-ok')
        })

      })
    }
  },
  created() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
.user-edit {
}
</style>
